<template>
  <view class="refund_order">
    <public-loading></public-loading>
    <z-nav-bar id="nav" bgColor="#ffffff" title="我要退款"></z-nav-bar>
    <view class="order_info_wrap mgt-24">
      <view class="order_info_box df justify-between item-bottom-border">
        <view class="order_info_left">订单编号</view>
        <view class="order_no">{{orderDetailsInfo.orderId}}</view>
      </view>
      <view class="order_info_box df justify-between">
        <view class="order_info_left">下单时间</view>
        <view class="order_no">{{orderDetailsInfo.createTime}}</view>
      </view>
    </view>
    <view class="order_info_wrap mgt-24">
      <view class="order_info_box df justify-between item-bottom-border">
        <view class="order_info_left">退款原因</view>
        <view class="order_no">
          <input   v-model="refundReason" placeholder="请输入退款原因" style="text-align: right;font-size:28rpx;" placeholder-style="color:#999"/>
        </view>
      </view>
      <view class="order_info_box df justify-between">
        <view class="order_info_left">退款金额</view>
        <view class="order_no df align-center">
<!--          ￥{{ orderDetailsInfo.totalAmount }}-->
          <up-input
            style="margin-right: 20rpx"
            placeholder="请输入内容"
            border="none"
            type="number"
            inputAlign="right"
            v-model="refundAmount"
          ></up-input>
          <back :isRight="true" :borderColor="'#999'" :padding="'4rpx 0 0'"></back>
        </view>
      </view>
    </view>
    <view class="tips mgt-24">
      <view>tip:</view>
      退款金额上限￥{{ orderDetailsInfo.totalAmount }}，金额支持修改，请与商家协商一致后谨慎填写，若修改金额后退款成功将不再支持申请剩余金额。
    </view>
    <view class="bottom-btn-box" >
      <main-button :color="'#fff'" :margin="'24rpx 0 0'" @click="submit">申请退款</main-button>
    </view>
  </view>
</template>

<script setup>
import {ref,reactive,toRefs} from 'vue'
import {useCustomStores} from '@/utils/hook'
import {customerAddAfterSales} from '../../api/cleaningOrder'
const {ShopStore} = useCustomStores()

const {orderDetailsInfo} = ShopStore
const refundAmount = ref(orderDetailsInfo.totalAmount)
const refundReason = ref('')
function submit(){

  customerAddAfterSales({
    refundReason:refundReason.value,
    orderNo: orderDetailsInfo.orderId,
    storeId: orderDetailsInfo.storeId,
    storeName: orderDetailsInfo.storeBriefDetailsVo.storeShortName,
    afterSalesProcess:'REFUND',
    refundAmount:refundAmount.value,
    orderStatus:40 ,
  }).then(res=>{
    uni.showToast({
      title: '申请成功',
      icon: 'none',
      duration: 2000
    })
    setTimeout(()=>{
      uni.navigateBack({
        delta: 2
      })
    },1500)


  })
}

</script>

<style lang="scss" scoped>
.refund_order{
  width: 100%;
  padding: 0 24rpx;
  .order_info_wrap{
    box-sizing: border-box;
    width: 100%;
    padding: 0 32rpx;
    border-radius: 16rpx;
    background-color: #FFFFFF;
    .order_info_box{
      padding: 32rpx;
      .order_info_left{
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
      }
      .order_no{
        font-weight: 400;
        font-size: 28rpx;
        color: #444444;
      }

    }
  }
  .tips{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
  }
}

</style>
